<!--引入商品库-->
<template>
    <a-modal 
        :visible="visible"
        okText="确定" 
        cancelText="取消"
        :title="title"
        :maskClosable="false"
        :destroyOnClose="true"
        :keyboard="false"
        :closable="false"
        width="800px"
        @cancel="closeModal()" 
        @ok="handleSubmit">

        <header>
            <a-form layout="inline">
                <a-form-item label="商品名称">
                <a-input
                    style="width:180px"
                    allowClear
                    v-model="goodsName"
                    placeholder="请输入商品名称"
                >
                </a-input>
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" @click="handleSearch">筛选</a-button>
                </a-form-item>
            </a-form>
        </header>
        <div class="flex">
            <div class="left">
                <a-list bordered :data-source="classifyList">
                    <a-list-item slot="renderItem" slot-scope="item,index" @click="handleSelectClassify(item,index)" :class="{active:columnIndex==index}">
                        {{ item.label }}
                    </a-list-item>
                </a-list>
            </div>
            <div class="right">
                <a-table bordered
                    rowKey="id"
                    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: handleSelectChange,type:'radio' }"
                 :columns="columns" :data-source="tableData"></a-table>
            </div>
        </div>
    </a-modal>
</template>

<script>
export default {
    props: {
        visible:{
            type:Boolean,
            default:false,
        }
    },
    data(){
        return {
            title:'选择库存商品',//
            columnIndex:0,
            classifyList:[
                {
                    label:'全部分类',
                    value:'',
                }
            ],
            goodsName:'',//搜索
            selectedRowKeys:[],
            pagination:{
                current:1,
                size:10,
            },
            columns:[
                {
                    title:'商品名称',
                    dataIndex:'goodsName',
                    key:'goodsName',
                },{
                    title:'总库存',
                    key:'goodsInventory',
                    dataIndex:'goodsInventory',
                }
            ],
            tableData:[],
            total:0,
            selectedRowKeys:[],
        };
    },
    created(){
        this.getProductClassifyList();
        this.getProductList();
    },
    methods:{
        handleSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
        },
        async getProductClassifyList(){
            let res=await this.$get('/goods/classify/list');
            if(res && res.returnCode=='1000'){
                (res.dataInfo || []).forEach(item=>{
                    this.classifyList.push({
                        label:item.classifyName,
                        value:item.id,
                    })
                })
            }
            else {
                this.classifyList=[
                    {
                        label:'全部分类',
                        value:0
                    }
                ];
            }
        },
        async getProductList(){
            let res=await this.$get('/goods/repository/page',{
                goodsName:this.goodsName,
                goodsClassificationId:this.classifyList[this.columnIndex].value,
                current:this.pagination.current,
                size:this.pagination.size,
            });
            if(res && res.returnCode=='1000'){
                this.total=res.dataInfo.total;
                this.pagination.current=res.dataInfo.current;
                this.tableData=res.dataInfo.records||[];
            }
            else {
                this.total=0;
                this.tableData=[];
            }
        },
        handleSelectClassify(item,index){
            console.log(item)
            this.columnIndex=index;
            this.getProductList();
        },
        handleSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
        },
        handleSearch(){
            this.getProductList();
        },
        handleSubmit () {
            console.log('this.selectedRowKeys',this.selectedRowKeys);
            this.$emit('submit',this.selectedRowKeys);
        },        
        closeModal (freshTable) {
            this.$emit('cancel', freshTable)
        }
    }
}
</script>

<style lang="less" scoped>
header{
  border-radius: 4px;
  background-color: #f5f5f5;
  padding: 24px 32px;
  margin-bottom:15px;
}
.search{
    .ant-input-search{
        width:300px;
    }
}
.flex{
    display:flex;
}
.left{
    width:200px;
    .ant-select{
        width:100%;
    }
    .ant-list{
        margin-top:10px;
        .ant-list-item{
            cursor: pointer;
            &.active{
                color:#40a9ff;
            }
        }
    }
}
.right{
    flex:1;
    margin-left:20px;
    .ant-table-wrapper{
        margin-top:10px;
    }
}
</style>